<template>
    <div ref="sceneNode" class="scene"></div>
    启用轨道控制器
    <input type="checkbox" name="test" v-model="checkedVal">
</template>

<script setup name="ModelView">
/**
 * @author zhaojiuyi
 * @date 2023/6/22
 * */
import {BoxGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer} from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {onMounted, ref} from "vue";

const sceneNode = ref()
const renderer = new WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)

const scene = new Scene()
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const geometry = new BoxGeometry( 1, 1, 1 );
const material = new MeshBasicMaterial( {color: 0x00ff00} );
const cube = new Mesh( geometry, material );
scene.add(cube)

camera.position.z = 5

const controls = new OrbitControls(camera, renderer.domElement)
controls.autoRotate = true
console.log(controls)
const render = () => {
    renderer.render(scene,camera)

    controls.update();

    controls.enabled = !!checkedVal.value;
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    requestAnimationFrame(render)


}

onMounted(()=>{
    const sceneDom = sceneNode.value
    sceneDom.innerHTML = null
    sceneDom.appendChild(renderer.domElement)
    render()
})

const checkedVal = ref(false)

</script>
<style>
.scene {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
</style>

